import React from 'react';
import {Icon} from "antd-mobile";
import Btn from "../../../components/btn/Btn";

import './coupon.less';


function Coupon() {
  return (
    <div className='v-other-coupon'>
      <div className='g-c8 g-flex g-between g-p10'>
        <p className='g-flex h-ai-c'>
          类型：全部券<Icon type='down' size='xxs' className='h-pl5'/>
        </p>
        <span>共12张</span>
      </div>
      <ul>
        <li className='g-bdrs12 g-bg-f g-ov'>
          <div className='h-money g-l g-p10 g-box g-rel g-flex h-ai-c g-f12'>
            <div className='g-ta-c g-w100'>
              <p>剩余可用余额</p>
              <p className='h-mt5'>￥<span className='g-f20'>10000</span>.00</p>
            </div>
          </div>
          <div className='h-msg g-l g-p10 g-box g-flex h-ai-c g-f12'>
            <div>
              <p className='g-mb10'><span className='g-f20'>原始券 </span>初始金额:10000</p>
              <p>有效期: 2020/08/08 - 2020/08/08</p>
            </div>
          </div>
        </li>

        <li className='g-bdrs12 g-bg-f g-ov g-mt10'>
          <div className='h-money g-l g-p10 g-box g-rel g-flex h-ai-c g-f12'>
            <div className='g-ta-c g-w100'>
              <p className='h-mt5'>￥<span className='g-f20'>10000</span>.00</p>
            </div>
          </div>
          <div className='h-msg g-l g-p10 g-box g-flex h-ai-c g-f12'>
            <div>
              <p className='g-mb10'><span className='g-f20'>原始券 </span></p>
              <p>有效期: 2020/08/08 - 2020/08/08</p>
            </div>
          </div>
        </li>
      </ul>


      <div className='g-mt30'>
        <Btn type='primary'>新增</Btn>
      </div>
    </div>
  )
}

export default Coupon;